<div class="sub-page-wrapper">
    <div class="layout-sub-page">
        <div class="table-action">
            <div class="left-operate">
                <nz-space [nzSize]='8'>
                    <input
                        *nzSpaceItem
                        [style]='{width: "180px"}'
                        nz-input
                        placeholder="菜单名称"
                        [(ngModel)]='searchObj.menuName'
                        (keyup)='keyEnter($event)'
                    />
                    <app-dict-select  *nzSpaceItem [dictKey]='"sys_normal_disable"' [dictPlaceholder]='"菜单状态"' [(selectKey)]='searchObj.status'>
                    </app-dict-select>

                    <button
                        *nzSpaceItem
                        nz-button
                        nz-tooltip
                        [nzTooltipTitle]="'搜索'"
                        [nzTooltipPlacement]="'top'"
                        (click)='getSystemMenuListByPage()'
                    >
                        <i nz-icon nzType="search"></i>
                    </button>
                    <button
                        *nzSpaceItem
                        nz-button
                        nz-tooltip
                        [nzTooltipTitle]="'重置'"
                        [nzTooltipPlacement]="'top'"
                        (click)='resetSearchObject()'
                    >
                        <span nz-icon >重置</span>
                    </button>
                </nz-space>
            </div>
            <div class="right-operate">
                <button
                    nz-button
                    nz-tooltip
                    [nzTooltipPlacement]="'top'"
                    [nzTooltipTitle]="!(expandState) ? '展开全部菜单' : '收缩全部菜单'"
                    (click)="onExpandAll()"
                    [disabled]="entityTree.length === 0"
                >
                    <i [nzType]="!(expandState) ? 'menu-unfold' : 'menu-fold'" nz-icon theme="outline"></i>
                    {{ !(expandState) ? '展开菜单' : '收缩菜单' }}
                </button>

                <button
                    nz-button
                    nz-tooltip
                    [nzTooltipTitle]="'新增菜单'"
                    [nzTooltipPlacement]="'top'"
                    (click)="addMenu()"
                >
                    <i nz-icon nzType="plus"></i>
                    新增
                </button>
            </div>
        </div>
        <ng-template #loadingTpl>
            <div class="data-loading">
                <ng-lottie
                    [options]="_config.lottieConfig"
                    [width]="_config.lottieConfig.width"
                    [height]="_config.lottieConfig.height"
                ></ng-lottie>
            </div>
        </ng-template>
        <nz-table
            [nzData]="entityTree"
            [nzLoading]="loadingState"
            [nzLoadingIndicator]="loadingTpl"
            [nzShowPagination]="false"
            [nzScroll]="_config.noPageAndTitleScrollValue"
        >
            <thead>
                <tr>
                    <th nzWidth="200px" nzShowSort nzColumnKey="menuName" nzLeft>菜单名称</th>
                    <th nzWidth="100px" nzShowSort nzColumnKey="icon">图标</th>
                    <th nzWidth="100px" nzShowSort nzColumnKey="orderNum">排序</th>
                    <th nzWidth="200px" nzShowSort nzColumnKey="perms">权限标志</th>
                    <th nzWidth="300px" nzShowSort nzColumnKey="component">组件路径</th>
                    <th nzWidth="100px" nzShowSort nzColumnKey="status">状态</th>
                    <th nzWidth="200px" nzShowSort nzColumnKey="createTime">创建时间</th>
                    <th nzWidth="200px" nzRight>操作</th>
                </tr>
            </thead>
            <tbody nz-tbody [@listAnimation]="entityTree">
                <ng-template #menus let-systemMenus>
                    <ng-template ngFor let-item [ngForOf]="systemMenus">
                        <tr [@itemAnimation]>
                            <td nzLeft [nzIndentSize]="item.level * 20" [nzShowExpand]="item.children" [(nzExpand)]="item.expand">
                                {{ item.menuName }}
                            </td>
                            <td><app-svg-show [code]="iconData.get(item.icon)||''" [width]='40' height='40'></app-svg-show></td>
                            <td>{{ item.orderNum }}</td>
                            <td>{{ item.perms }}</td>
                            <td>{{ item.component }}</td>
                            <td>{{ item.status === '0' ? '正常' : '停用' }}</td>
                            <td>
                                {{item.createTime}}
                            </td>
                            <td nzRight>
                                <ng-container>
                                    <a
                                        nz-tooltip
                                        nzTooltipTitle="编辑菜单"
                                        (click)="editMenu(item.menuId)"
                                        [hidden]="item.menuLabelName"
                                    >
                                        编辑
                                    </a>
                                    <nz-divider nzType="vertical" [hidden]="item.menuLabelName"></nz-divider>
                                </ng-container>
                                <ng-container>
                                    <a
                                        nz-tooltip
                                        [nzPopconfirmTitle]="'确认删除此菜单？'"
                                        (nzOnConfirm)="onDelete(item.key, deleteRef)"
                                        [hidden]="item.menuLabelName"
                                        nz-popconfirm
                                        nzTooltipTitle="删除菜单"
                                        #deleteRef
                                    >
                                        删除
                                    </a>
                                </ng-container>
                            </td>
                        </tr>
                        <ng-container *ngIf="item.children && item.expand">
                            <ng-container *ngTemplateOutlet="menus; context: { $implicit: item.children }"></ng-container>
                        </ng-container>
                    </ng-template>
                </ng-template>
                <ng-container *ngTemplateOutlet="menus; context: { $implicit: entityTree }"></ng-container>
            </tbody>
        </nz-table>
    </div>
</div>


<app-menu-option #menuOption></app-menu-option>




